<template>
  <div class="share-container">
    <el-form label-position="top" :model="form" @submit.prevent>
      <el-form-item label="URL">
        <el-input v-model="form.url" clearable />
      </el-form-item>
      <el-form-item label="二维码">
        <VueQr :dot-scale="0.5" :logo-src="LogoSrc" :text="form.url" />
      </el-form-item>
      <el-form-item label="操作">
        <el-button native-type="submit" type="primary" @click="copy">
          拷贝
        </el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button type="danger" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import LogoSrc from "/@/assets/svg/share.svg";
  import VueQr from "vue-qr/src/packages/vue-qr.vue";
  import { HandleClipboard } from "/@/utils/utils.js";

  const form = reactive({
    url: "https://gitee.com/copper-core/mfs_admin",
  });

  const copy = () => {
    HandleClipboard(form.url);
  };

  const reset = () => {
    form.url = "https://gitee.com/copper-core/mfs_admin";
  };

  const clear = () => {
    form.url = "";
  };
</script>

<style lang="scss" scoped></style>
